<template>
  <div>
    <h-box>
      <div slot="header">
        <el-row type="flex">
          <el-col>昨日优惠券数据汇总</el-col>
          <el-col class="hui-text-right">
            <!--字段说明，start-->
            <el-tooltip placement="bottom-end" effect="light">
              <div slot="content" class="hui-font-size-small" style="line-height: 1.6">
                <div v-for="item in descYesterday" :key="item.label">
                  <b>{{ item.label }}:</b> {{ item.desc }}</div>
              </div>
              <span class="hui-color-text-link">字段说明</span>
            </el-tooltip>
            <!--字段说明，end-->
          </el-col>
        </el-row>
      </div>
      <el-row type="flex" :gutter="40">
        <el-col v-for="item in yesterday" :key="item.label" class="hui-statistic-border">
          <div class="hui-font-size-base">{{ item.label }}</div>
          <div class="hui-statistic-value">
            <template v-if="item.label === '拉动营收(元)'">{{ item.value | currency('￥', 2) }}</template>
            <template v-else>{{ item.value | currency('', 0) }}</template>
          </div>
          <div v-for="i in item.contrast" :key="i.label" class="hui-font-size-small">
            <div>
              <span>{{ i.label }}:&nbsp;</span>
              <h-icon size="12px" :icon="i.trend === 'minus' ? 'icon-arrowdownbold' : 'icon-arrowupbold'" :color="i.trend === 'minus' ? '#fa5555' : '#67c23a'"></h-icon>
              <span class="hui-font-number">{{ (i.value * 100) | currency('', 2) + '%' }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </h-box>

    <h-box header="优惠券效果趋势">
      <!--<div class="hui-mb-1">趋势chart</div>-->
      <ve-line :data="chartData" :settings="chartSettings" :colors="chartSetting.colors"></ve-line>

      <el-form :model="filterForm" inline>
        <el-form-item prop="dateRange">
          <el-date-picker v-model="filterForm.dateRange" type="daterange" align="center" unlink-panels start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleFilter" :loading="loading" type="primary">确定</el-button>
          <el-button @click="handleDownload" :loading="loading" icon="el-icon-download">导出数据</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="history.list" :default-sort="{ prop: 'date', order: 'descending' }" stripe row-class-name="hui-font-number">
        <el-table-column prop="date" label="日期" sortable></el-table-column>
        <el-table-column prop="send" label="领券数(张)" sortable></el-table-column>
        <el-table-column prop="consume" label="核销数(张)" sortable></el-table-column>
        <el-table-column prop="tradeTotal" label="拉动营收(元)" sortable>
          <template slot-scope="scope">
            {{ scope.row.tradeTotal | currency('￥', 2) }}
          </template>
        </el-table-column>
        <el-table-column prop="tradeCount" label="关联订单(笔)" sortable></el-table-column>
      </el-table>

      <!--分页，start-->
      <el-pagination @current-change="handleCurrentChange" :current-page.sync="history.pages" :page-sizes="[10]" :page-size="10" layout="total, sizes, prev, pager, next" :total="history.total" background class="hui-mt-2">
      </el-pagination>
      <!--分页，end-->
    </h-box>
  </div>
</template>

<script>
export default {
  data () {
    return {
      descYesterday: [
        {
          label: '发券数',
          desc: '优惠券发出的张数'
        },
        {
          label: '核销数',
          desc: '优惠券核销的张数'
        },
        {
          label: '拉动营收',
          desc: '使用了优惠券的订单总金额'
        },
        {
          label: '关联订单',
          desc: '使用了优惠券的订单笔数'
        },
        {
          label: '日/周/月',
          desc: '昨日数据相比1天、7天、30天前的变化'
        }
      ],
      pickerOptions: {
        disabledDate (time) {
          const today = new Date()
          const end = new Date()
          return (
            time.getTime() > end.setTime(today.getTime() - 3600 * 1000 * 24)
          )
        },
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              let today = new Date()
              let end = new Date()
              let start = new Date()
              end.setTime(today.getTime() - 3600 * 1000 * 24)
              start.setTime(end.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              let today = new Date()
              let end = new Date()
              let start = new Date()
              end.setTime(today.getTime() - 3600 * 1000 * 24)
              start.setTime(end.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              let today = new Date()
              let end = new Date()
              let start = new Date()
              end.setTime(today.getTime() - 3600 * 1000 * 24)
              start.setTime(end.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      filterForm: {
        dateRange: []
      },
      loading: false,
      yesterday: [],
      history: {
        pages: 0,
        total: 0,
        list: []
      },
      chartData: {},
      chartSetting: {
        columns: [],
        rows: [],
        colors: [
          '#516b91',
          '#59c4e6',
          '#edafda',
          '#93b7e3',
          '#a5e7f0',
          '#cbb0e3'
        ]
      }
    }
  },
  created () {
    this.setDateRange()
    this.mockYesterday()
    this.mockHistory()
    this.setChartData()
    this.setChartSetting()
  },
  methods: {
    // 初始化筛选日期
    setDateRange () {
      const today = new Date()
      const end = new Date()
      const start = new Date()
      end.setTime(today.getTime() - 3600 * 1000 * 24)
      start.setTime(end.getTime() - 3600 * 1000 * 24 * 7)
      this.filterForm.dateRange = [start, end]
    },
    mockYesterday () {
      let yesterday = this.yesterday
      let i = 0
      let tmp = [
        {
          label: '领券数(张)',
          value: 100,
          contrast: [
            {
              label: '日',
              trend: 'minus',
              value: 0.5
            },
            {
              label: '周',
              trend: 'minus',
              value: 0.5
            },
            {
              label: '月',
              trend: 'plus',
              value: 0.5
            }
          ]
        },
        {
          label: '核销数(张)',
          value: 80,
          contrast: [
            {
              label: '日',
              trend: 'minus',
              value: 0.5
            },
            {
              label: '周',
              trend: 'minus',
              value: 0.5
            },
            {
              label: '月',
              trend: 'plus',
              value: 0.5
            }
          ]
        },
        {
          label: '拉动营收(元)',
          value: 12223,
          contrast: [
            {
              label: '日',
              trend: 'minus',
              value: 0.5
            },
            {
              label: '周',
              trend: 'minus',
              value: 0.5
            },
            {
              label: '月',
              trend: 'plus',
              value: 0.5
            }
          ]
        },
        {
          label: '关联订单(笔)',
          value: 79,
          contrast: [
            {
              label: '日',
              trend: 'minus',
              value: 0.5
            },
            {
              label: '周',
              trend: 'minus',
              value: 0.5
            },
            {
              label: '月',
              trend: 'plus',
              value: 0.5
            }
          ]
        }
      ]
      for (i in tmp) {
        yesterday.push(tmp[i])
      }
      this.yesterday = yesterday
    },
    mockHistory () {
      let pages = this.history.pages
      let total = 7
      let list = []
      let i = 0
      let tmp = [
        {
          date: '2018-01-25',
          send: 110,
          consume: 240,
          tradeTotal: 12223,
          tradeCount: 240
        },
        {
          date: '2018-01-26',
          send: 100,
          consume: 250,
          tradeTotal: 13225,
          tradeCount: 230
        },
        {
          date: '2018-01-27',
          send: 80,
          consume: 102,
          tradeTotal: 9899,
          tradeCount: 100
        },
        {
          date: '2018-01-28',
          send: 4000,
          consume: 232,
          tradeTotal: 2500,
          tradeCount: 220
        },
        {
          date: '2018-01-29',
          send: 30,
          consume: 800,
          tradeTotal: 50000,
          tradeCount: 600
        },
        {
          date: '2018-01-30',
          send: 20,
          consume: 600,
          tradeTotal: 42000,
          tradeCount: 300
        },
        {
          date: '2018-02-01',
          send: 10,
          consume: 200,
          tradeTotal: 22000,
          tradeCount: 180
        }
      ]
      for (i in tmp) {
        list.push(tmp[i])
      }
      this.history.list = list
      this.history.pages = pages + 1
      this.history.total = total
    },
    handleCurrentChange () {
      console.log(this.history.pages)
      this.$loading()
      setTimeout(() => {
        this.$loading().close()
      }, 500)
    },
    handleFilter () {
      this.loading = true
      console.log(this.filterForm)
      this.$loading()
      setTimeout(() => {
        this.$loading().close()
        this.loading = false
      }, 500)
    },
    // 下载事件
    handleDownload () {
      console.log('下载标签')
    },
    setChartData () {
      this.chartData.columns = [
        'date',
        'send',
        'consume',
        'tradeTotal',
        'tradeCount'
      ]
      this.chartData.rows = this.history.list
    },
    setChartSetting () {
      this.chartSettings = {
        labelMap: {
          date: '日期',
          send: '领券数(张)',
          consume: '核销数(张)',
          tradeTotal: '拉动营收(元)',
          tradeCount: '关联订单(笔)'
        },
        area: true,
        axisSite: { right: ['tradeTotal'] },
        yAxisType: ['KMB', 'KMB'],
        yAxisName: ['数量(张/笔)', '金额(元)']
      }
    }
  }
}
</script>

<style lang="less">
  @import '../../../../../common/h-theme/_variable';
  .hui-statistic-border {
    &:not(:last-child) {
      border-right: @--border-base;
    }
  }
  .hui-statistic-value {
    font-family: 'Tahoma';
    font-size: 28px;
    font-weight: @--font-weight-primary;
    color: @--color-text-secondary;
  }
</style>
